import logo from "../../../../imgs/logo.png";
import right from "../../../../imgs/right.png";
import Icon from "@ui/RJMart/icons";
import LoginHeader from "@page/common/comps/LoginHeader";
import "@page/common/css/commheader.css";

export default class StepHeader extends React.Component {
    constructor() {
        super();
        this.state = {
            choose: 1
        };
    }
    render() {
        return (
            <div>
                <LoginHeader />
                <div className={"cart-step-header"}>
                    <div className={"cart-step-header-box"}>
                        <div
                            onClick={() => {
                                $state.go({
                                    stateName: "/"
                                });
                            }}
                            style={{
                                width: 257,
                                height: 47,
                                cursor: "pointer",
                                marginTop: 52
                            }}
                        >
                            <img src={logo} />
                        </div>
                        <div>
                            {this.renderIcons()}
                            {this.renderText()}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    renderIcons() {
        const { step } = this.props;
        if (step == 1) {
            return (
                <div className={"cart-step-header-stpes"}>
                    <DotItem choose={step == 1} step={1} />
                    <ArrowItem dotIsBlue={step > 1} />
                    <DotItem choose={step == 2} step={2} />
                    <ArrowItem dotIsBlue={step > 2} />
                    <DotItem choose={step == 3} step={3} />
                    <ArrowItem dotIsBlue={step > 3} />
                    <DotItem choose={step == 4} step={4} />
                </div>
            );
        } else if (step == 2) {
            return (
                <div className={"cart-step-header-stpes"}>
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 1} />
                    <DotItem choose={step == 2} step={2} />
                    <ArrowItem dotIsBlue={step > 2} />
                    <DotItem choose={step == 3} step={3} />
                    <ArrowItem dotIsBlue={step > 3} />
                    <DotItem choose={step == 4} step={4} />
                </div>
            );
        } else if (step == 3) {
            return (
                <div className={"cart-step-header-stpes"}>
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 1} />
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 2} />
                    <DotItem choose={step == 3} step={3} />
                    <ArrowItem dotIsBlue={step > 3} />
                    <DotItem choose={step == 4} step={4} />
                </div>
            );
        } else if (step == 4) {
            return (
                <div className={"cart-step-header-stpes"}>
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 1} />
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 2} />
                    <StepComplete />
                    <ArrowItem dotIsBlue={step > 3} />
                    <StepComplete />
                </div>
            );
        }
        return null;
    }

    renderText() {
        const { step } = this.props;
        return (
            <div className={"cart-step-header-stpes-texts"}>
                <p
                    className={
                        step >= 1
                            ? "cart-step-header-texts-p1-choose"
                            : "cart-step-header-texts-p1"
                    }
                >
                    加入购物车
                </p>

                <p
                    className={
                        step >= 2
                            ? "cart-step-header-texts-p2-choose"
                            : "cart-step-header-texts-p2"
                    }
                >
                    填写核对采购单信息
                </p>
                <p
                    className={
                        step >= 3
                            ? "cart-step-header-texts-p3-choose"
                            : "cart-step-header-texts-p3"
                    }
                >
                    生成采购单并提交审核
                </p>
                <p
                    className={
                        step >= 4
                            ? "cart-step-header-texts-p4-choose"
                            : "cart-step-header-texts-p4"
                    }
                >
                    完成
                </p>
            </div>
        );
    }
}

class StepComplete extends React.Component {
    render() {
        const { step, choose } = this.props;
        return (
            <div className={"cart-step-header-item"}>
                <div className={"cart-step-header-item-dot2"}>
                    <Icon type={"check"} color={"#0093EB"} size={"small"} />
                </div>
            </div>
        );
    }
}

class ArrowItem extends React.Component {
    constructor() {
        super();
        this.lists = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    }
    render() {
        const { dotIsBlue } = this.props;
        return (
            <div className={"cart-step-header-arrows"}>
                {this.lists.map((item, index) => (
                    <div
                        key={index}
                        className={
                            dotIsBlue
                                ? "cart-step-header-arrow-dot1"
                                : "cart-step-header-arrow-dot"
                        }
                    />
                ))}
                <div className={"cart-step-header-arrow-right"}>
                    {/*<img src={right} alt=""/>*/}
                    <Icon
                        type={"right"}
                        color={dotIsBlue ? "#0093EB" : "#BCBCBC"}
                        size={"small"}
                    />
                </div>
            </div>
        );
    }
}

class DotItem extends React.Component {
    render() {
        const { step, choose } = this.props;
        return (
            <div className={"cart-step-header-item"}>
                <div
                    className={
                        choose
                            ? "cart-step-header-item-dot"
                            : "cart-step-header-item-dot1"
                    }
                >
                    <p>{step}</p>
                </div>
            </div>
        );
    }
}
